<template>
  <div>
    <div>
      {{ info.msg }}
    </div>
    <div>
      {{ info.age }}
    </div>
    <el-button @click="addPro">添加属性</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        msg: '黑马'
      }
    }
  },
  mounted() {
    const info1 = {
      name: '黑马'
    }

    const info2 = Object.assign(info1, {
      age: 10
    })

    console.log(info2 === info1) // {}
  },
  beforeRouteEnter(to, from, next) {
  //
    console.log(this)
    next(vm => {
      console.log(vm) // 当前的组件实例
    })
  },
  methods: {
    addPro() {
      // 给对象新添加一个属性页面是不会响应式更新的
      // vue默认初始化的时候会把data里面的所有数据进行响应式的处理。
      // this.info.age = 10
      // this.$set(this.info, 'age', 10)
    }
  }
}
</script>

<style scoped>

</style>
